<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>Review - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-sm-7">
	<div class="container pt-3 pt-xl-5">
		<div class="row">
			
			

			<!-- Main content -->
			<div class="col-lg-12 col-xl-12 ps-lg-12 ps-xl-12">
				<!-- Title and offcanvas button -->
				<div class="d-flex justify-content-between align-items-center mb-5 mb-sm-6">
					<!-- Title -->
					<h1 class="h3 mb-0">My reviews</h1>
				</div>

				<!-- Table -->
				<div class="table-responsive border-0">
					<table id="reviewTable"></table>
				</div>

			</div>
		</div>
	</div>
</section>
	</div>
	<script layout:fragment="fragment_script">
		$(document).ready(function () {
			loadReviewTable()
		});
		function loadReviewTable() {
			$('#reviewTable').bootstrapTable('destroy');
			$('#reviewTable').bootstrapTable({
				url: "[[@{'/user/reviews'}]]",
				uniqueId: 'reviewId',
				dataType: "json",
				pagination: true,
				pageSize: 10,
				queryParams: function (params) {
					var temp = {
						size: params.limit,
						page: (params.offset / params.limit),
						sort: params.sort,
						sortOrder: params.order
					};
					return temp;
				},
				sidePagination: "server",
				pageList: [30, 50],
				columns: [{
					title: 'Sort',
					formatter: function (value, row, index) {
						var pageSize = $('#reviewTable').bootstrapTable('getOptions').pageSize;
						var pageNumber = $('#reviewTable').bootstrapTable('getOptions').pageNumber;
						return pageSize * (pageNumber - 1) + index + 1;
					}
				},{
					field: 'reviewText',
					title: 'review-Text',
					formatter: function (value, row, index) {
						return value + '</br>' + row.reviewTime
					}
				}, {
					field: 'reviewReply',
					title: 'Reply',
					formatter: function (value, row, index) {
						if(value){
							return value + '</br>' + row.reviewReplyTime
						}
						return ''
					}
				},{
					title: 'Operate',
					field: 'reviewId',
					class: 'text-center',
					width: '20%',
					formatter: function (value, row, index) {
						return '<button class="btn btn-sm btn-danger " onclick="removeReview(\'' + value + '\')">Remove</button>';
					}
				},],
				onPostBody: function (value) {
					$(".fixed-table-container").css('padding-bottom', '37px');
				}
			});
		}
		function removeReview(reviewId) {
			layer.msg("Do you want to delete it", {
				title: 'tip', icon: 3, btn: ["Confirm", "Cancel"],
				yes: function () {
					$.ajax({
						type: "get",
						url: ctx + "/user/delReview",
						data: {
							"reviewId": reviewId,
						},
						success: function (resp) {
							layer.msg(resp.msg);
							if (resp.status == 0) {
								loadReviewTable()
							}
						}
					});
				},
				btn2: function () {
					// layer.msg("Cancel");
				}
			});
		}
	</script>
</body>
</html>